<template>
    <view id="add-address">
        <view>
            <van-cell-group class="input_class">
                <van-field
                        :value="realname"
                        placeholder="请输入收货人姓名"
                        label="收货人姓名"
                        required
                        :border="has_boder"
                        @change="onChangeName"
                />
                <van-field
                        :value="mobile"
                        label="手机号"
                        required
                        placeholder="请输入手机号"
                        :border="has_boder"
                        @change="onChangeMobile"
                />
                <view class="choose-address" @tap="chooseAddress">
                    <view class="choose-address-input">
                        <van-field
                                :value="area_text"
                                label="收货地址"
                                required
                                placeholder="请选择收货地址"
                                :border="has_boder"
                        />
                    </view>
                    <view class="next-class-box"><image class="next-class"  src="../../static/img/jiantou.png"></image></view>

                </view>
                <view v-if="area_is_show" >
                    <van-area
                            :area-list="areaList"
                            :columns-placeholder="columns_placeholder"
                            @confirm="chooseConfirm"
                            @cancel="chooseCancel"
                            title="地址选择"
                    />
                </view>
                <view v-if="other_is_show">
                    <view><p class="p-detail">详细地址：如道路、小区、楼栋号、门牌号、单元室</p></view>

                    <van-field
                            :value="house_number"
                            required
                            placeholder="请输入详细地址"
                            :border="has_boder"
                            @change="onChangeDetail"
                    />
                </view>
            </van-cell-group>
        </view>
        <view class="button-submit" v-if="other_is_show">
            <van-button type="info" round size="large" color="#FF9900"  @tap="submit">提交保存</van-button>
        </view>
    </view>
</template>

<script>
    import MInput from '@/components/m-input.vue'
    import {areaList} from '@/mock/address.js';
    export default {
        name: "editAddress",
        data() {
            return {
                other_is_show:true,
                area_is_show:false,
                has_boder:true,
                realname:'',
                mobile:'',
                province:'',
                city:'',
                district:'',
                house_number:'',
                columns_placeholder:['请选择', '请选择','请选择'],
                areaList:areaList,
                area_text:'',
                address_id:''
            }
        },
        onLoad(query){
            this.address_id=query.id
        },
        mounted() {
            this.getAddressInfo()
        },
        methods: {
            onChangeName(event) { //名字修改
                this.realname=event.detail
            },
            onChangeMobile(event) { //手机号修改
                this.mobile=event.detail
            },
            onChangeDetail(event) { //详细地址修改
                this.house_number=event.detail
            },
            chooseAddress(){
                //点击地址选择事件，处理显示模块
                this.changeShowState();
            },
            chooseConfirm(event){  //确认地址事件
                // event.detail 为返回选重的数组
                event.detail.values.forEach((item)=>{
                    if(this.province===''){
                        this.province=item.name
                    }else if(this.city===''){
                        this.city=item.name
                    }else{
                        this.district=item.name
                    }

                })
                this.area_text=this.province+this.city+this.district
                this.changeShowState();
            },
            chooseCancel(event){ //取消地址事件
                this.changeShowState();
            },
            changeShowState(){
                this.other_is_show=!this.other_is_show
                this.area_is_show=!this.area_is_show
            },
            async submit(){
                //先验证填写的信息是否完整以及有误
                if(this.realname==='' || this.mobile==='' || this.province==='' ||this.city==='' || this.district==='' || this.house_number===''){
                    uni.showToast({
                        title:"请将信息填写完整",
                        icon:"none",
                    })
                }
                let reg= /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
                if(!reg.test(this.mobile)){
                    uni.showToast({
                        title:"请填写正确的手机号",
                        icon:"none",
                    })
                }
                let resData = await this.$apis.updateAddress({
                    realname:this.realname,
                    mobile:this.mobile,
                    province:this.province,
                    city:this.city,
                    district:this.district,
                    house_number:this.house_number,
                    id:this.address_id
                })
                if(resData.code===0){
                    uni.showToast({
                        title:"修改成功",
                        icon:"success",
                    })
                    setTimeout(()=>{
                        // this.$router.push({
                        //     route:this.$routesConfig.addressList,
                        // })
                        uni.redirectTo({
                            url:'/pages/user/addressList'
                        })
                    },1000)
                }
            },
            async  getAddressInfo(){
                if(this.address_id!==''){
                    let resData= await this.$apis.getAddressInfo({id:this.address_id})
                    if(resData.code===0){
                        this.realname=resData.data.address.realname
                        this.mobile=resData.data.address.mobile
                        this.province=resData.data.address.province
                        this.city=resData.data.address.city
                        this.district=resData.data.address.district
                        this.house_number=resData.data.address.house_number
                        this.area_text=this.province+this.city+this.district
                    }
                }
            }
        },
        components:{
            MInput,
        }

    }
</script>

<style lang="less" scoped>
    .box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .p-detail{
        font-size: 25rpx;
        margin-top: 10rpx;
        padding-left: 30rpx;
        color: #cccccc;
    }
    .button-submit{
        width: 90%;
        margin-left: 5%;
        margin-top: 10rpx;
    }
    .choose-address{
        position: relative;
        display:flex;
        flex-direction: row;
        /*justify-content: space-between;*/
    }
    .choose-address-input{
        width: 90%;
    }
    .next-class-box {
        width: 10%;
        border-bottom: solid #f1f1f1 0.1px;
    }
    .next-class{
        /*margin-top: 25rpx;*/
        /*margin-right: 40rpx;*/
        position: relative;
        top:25rpx;
        left: 10rpx;
        width: 35rpx;
        height: 35rpx
    }

</style>
